<template>
  <div class="m-song-item" @click.stop="onPlaySong">
    <!-- 序号 -->
    <div class="song-order" v-show="order">
      <p class="song-order__num" :class="{ 'hot': order < 4 }">{{ formatedOrder }}</p>
      <p class="song-order__change">- {{ 0 }}</p>
    </div>

    <!-- 主要信息 -->
    <div class="song-info">
      <p class="song-info__name" v-show="name">
        <span>{{ name }}</span>
        <span class="name-alia" v-show="alia && aliaPost">（{{ alia }}）</span>
      </p>
      <p class="song-info__detail">
        <span class="detail-ar" v-show="ar">{{ ar }}</span>
        <span class="detail-sep" v-show="alName"> - </span>
        <span class="detail-al" v-show="alName">{{ alName }}</span>
      </p>
      <p class="song-info__alia" v-show="alia && !aliaPost">{{ alia }}</p>
    </div>

    <!-- mv-icon -->
    <div v-if="song.mv"
      class="song-mv"
      @click.stop="onPlayMv"
      v-coming="''">
      <svg-icon icon-class="mv-tag"></svg-icon>
    </div>

    <!-- more-icon -->
    <div class="song-more"
      @click.stop="onShowMore"
      v-coming="''">
      <svg-icon icon-class="more-vertical"></svg-icon>
    </div>
  </div>
</template>

<script>
import { formatArtists } from '@/utils/'

export default {
  name: 'song-item',
  props: {
    order: { type: Number, default: 0 }, // 歌曲序号
    aliaPost: { type: Boolean, default: false }, // alia 是否紧跟歌曲名
    song: {
      type: Object,
      default: () => ({
        id: 0,
        name: '',
        ar: [],
        al: {},
        alia: []
      })
    }
  },
  computed: {
    id () {
      return this.song.id
    },
    name () {
      return this.song.name
    },
    ar () {
      const ar = this.song.ar || this.song.artists
      return formatArtists(ar)
    },
    alId () {
      const al = this.song.al || this.song.album
      return al.id
    },
    alName () {
      const al = this.song.al || this.song.album
      return al.name
    },
    alia () {
      const alia = this.song.alia || this.song.alias
      return alia[0]
    },
    formatedOrder () {
      return this.order < 10 ? `0${this.order}` : this.order
    }
  },
  methods: {
    /** 不提交 action，而是委托祖先组件完成
     * play-song: 播放歌曲
     * update-playlist: 更新整个播放列表
     */
    onPlaySong () {
      console.log('Select song:', this.song)
      const song = (this.song.al && this.song.ar) ? this.song : this.song.id
      this.$emit('play-song', song)
      this.$emit('update-playlist')
    },
    onPlayMv () {},
    onShowMore () {}
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixins.scss';

.m-song-item {
  display: flex;
  align-items: center;
  padding: .05rem 0;
  border-bottom: 1px solid #eee;

  /* order */
  .song-order {
    width: .4rem;
    text-align: center;

    &__num, &__change {
      height: .2rem;
      line-height: .2rem;
    }

    &__num {
      font-size: $font--medium-s;
      &.hot {
        color: $color-palette-red;
      }
    }

    &__change {
      font-size: $font--small-s;
      color: #ccc;
    }
  }

  /* content */
  .song-info {
    overflow: hidden;  // fix-bug：设置超出文本显示省略号无效
    flex: 1;
    &__name, &__detail, &__alia {
      @include ellipsis();
    }

    &__name {
      height: .25rem;
      line-height: .2rem;
      font-size: $font--medium-s;

      .name-alia {
        color: #ccc;
      }
    }

    &__detail {
      height: .2rem;
      line-height: .2rem;
      font-size: $font--small-s;
      color: #aaa;

      .detail-ar {}
      .detail-sep {}
      .detail-al {}
    }

    &__alia {
      height: .2rem;
      line-height: .2rem;
      font-size: $font--small-s;
      color: #aaa;
    }
  }

  /* mv-icon, more-icon */
  .song-mv, .song-more {
    width: .35rem;
    /* height: .35rem; */
    height: 100%;
    line-height: .35rem;
    text-align: center;
    font-size: $font--medium-s;
  }
}
</style>
